<template>
  <div class="quan">
    <div class="bodys">
      <div class="Discount">
        <div></div>
        <ul>
          <li class="lubo">
            <div class="swpor" v-if="minswrip[0]">
              <van-swipe :autoplay="3000" :show-indicators="false">
                <van-swipe-item v-for="(image, index) in minswrip" :key="index">
                  <!-- <img v-lazy="image" /> -->
                  <div class="imglobo">
                    <van-image
                      width="100%"
                      fit="fit"
                      radius="5"
                      lazy-load
                      :src="image.picUrl"
                    />
                    <div class="title">
                      <span>
                        {{ image.name }}
                      </span>
                      <span> 最低价：￥{{ image.floorPrice }} </span>
                    </div>
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
          </li>
          <li>
            <div class="redPacket">
              <div class="redPacketTitle">
                <span>优惠红包</span>
              </div>

              <ul class="redPacketType" v-if="couponList[randoms]">
                <li>
                  <div>
                    <span>{{ couponList[randoms].desc }}</span>
                    <span>{{ couponList[randoms].name }}</span>
                  </div>
                  <div class="discountMoney">
                    <span class="discountMoneys"
                      >{{ couponList[randoms].discount }}
                    </span>
                    <span>元</span>
                  </div>
                  <span class="yuanQuan"></span>
                </li>
                <li>
                  <span class="validity"
                    >有效日期：{{ couponList[randoms].days }}天</span
                  >
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../http/API";
import { Image } from "vant";
import { Swipe, SwipeItem } from "vant";
import { Lazyload } from "vant";
import { Divider } from "vant";
export default {
  name: "Discount",
  props: ["datas"],
  components: {
    [Image.name]: Image,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Lazyload.name]: Lazyload,
    [Divider.name]: Divider,
  },
  watch: {
    datas(val) {},
  },
  data() {
    return {
      images: [
        "https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i3/111798036/O1CN01km6ZUD29EXUn5ZLkP_!!0-saturn_solar.jpg_180x180.jpg_.webp",
        "https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/2207084708668/O1CN01I5THuK2Dtzmx8ERZq_!!0-item_pic.jpg_180x180.jpg_.webp",
      ],
      // 第二个轮播
      minswrip: [],
      couponList: [],
      randoms: 0,
    };
  },
  created() {
    // this.nadaoshuju();
    this.http();
  },
  methods: {
    http() {
      this.$get(API.GET_HOME_INFO, {}).then((res) => {
          this.minswrip=res.data.brandList
        // console.log(this.indexdata);
         this.couponList=res.data.couponList
           this.random(this.couponList);
      });
    },

    // nadaoshuju() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       // console.log(this.$store.state.indexdata);
    //       this.minswrip = this.$store.state.indexdata.brandList;
    //       this.couponList = this.$store.state.indexdata.couponList;
    //       // console.log(this.ToRecommend);
    //       // // this.random(this.ToRecommend);

    //       resolve();
    //     }, 1000);
    //   }).then((response) => {
    //     // this.random(this.ToRecommend);
    //     // console.log(this.couponList);
      
    //   });
    // },

    random(e) {
      let a = Math.floor(Math.random() * e.length);
      // console.log( a)
      this.randoms = a;
    },
  },
};
</script>

<style lang="less" scoped>
.quan {
  width: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(238, 238, 238)
  );
  .bodys {
    background: repeating-linear-gradient(
      to bottom,
      rgb(255, 255, 255),
      rgb(238, 238, 238)
    );
    .sj();
  }
}
.imglobo {
  width: 95%;
  margin: 0 auto;
  // margin-top: 5px;
  margin-bottom: 5px;
  // overflow: hidden;
  height: 100%;
  .title {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 5px;
    span {
      &:nth-child(1) {
        font-size: 15px;
      }
      &:nth-child(2) {
        position: absolute;
        flex-direction: column;
        // border: 1px solid #000;
        display: flex;
        bottom: 0px;
        right: 0px;
        padding: 0px;
        margin: 0px;
        color: rgb(255, 60, 60);
      }
    }
  }
}
.redPacketTcolor {
  background-color: rgb(238, 65, 79);
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.Discount {
  height: 125px;
  // border: 1px solid #000;
  background: rgba(255, 255, 255, 0.664);
  // margin-top: 3px;
  margin-bottom: 5px;
  border-radius: 5px;
  margin-left: 5px;

  margin-right: 5px;

  ul {
    display: flex;
    justify-content: space-between;
    // border: 1px solid #000;
    width: 100%;
    height: 100%;
    .lubo {
      overflow: hidden;
      position: relative;
      .swpor {
        height: 100%;
        width: 100%;
        .van-swipe {
          height: 100%;
          width: 100%;
        }
        img {
          width: 100%;
          //   height: 100%;
        }
        margin-top: 0.133333rem;
      }
    }

    li {
      flex: 1;
      //   border: 1px solid #000;

      .redPacket {
        display: flex;
        flex-direction: column;
        height: 100%;
        .margin();

        .redPacketType {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .redPacketTcolor();
          margin-top: 5px;
          height: 80px;
          border-radius: 5px;

          & li:nth-child(1) {
            position: relative;

            margin-left: 10px;
            color: rgb(245, 245, 245);
            display: flex;
            // flex-direction: column;
            //  justify-content: space-between;
            // justify-content: center;
            border-bottom: 1px solid rgb(221, 221, 221);
            // border: 1px solid #000;
            .discountMoney {
              flex: 1;
              height: 100%;
              // border: 1px solid #000;
              display: flex;
              justify-content: center;

              align-items: center;

              .discountMoneys {
                font-size: 30px;
                margin-right: 3px;
              }
            }
            span {
              display: block;

              // border: 1px solid #000;
            }
            & span:nth-child(1) {
              font-size: 16px;
              margin-top: 5px;
            }
            & span:nth-child(2) {
              font-size: 10px;
              margin-top: 5px;
              margin-bottom: 5px;
            }
            .yuanQuan {
              display: block;
              width: 10px;
              height: 10px;
              // border: 1px solid #000;
              border-radius: 10px;
              position: absolute;
              // z-index: 10;
              bottom: -5px;
              background: repeating-linear-gradient(
                to bottom,
                rgb(255, 255, 255),
                rgb(238, 238, 238)
              );
              left: -15px;
            }
          }
          & li:nth-child(2) {
            display: flex;
            align-items: center;
            .validity {
              margin-left: 10px;
              font-size: 10px;
              color: rgb(238, 238, 238);
            }
          }
        }
        .redPacketTitle {
          height: 0.733333rem;
          border-radius: 5px 5px 0 0;
          text-align: center;
          display: flex;
          justify-content: center;
          align-content: center;
          align-items: center;
          .redPacketTcolor();

          span {
            line-height: 20px;
            font-size: 15px;
            color: rgb(238, 238, 238);
          }
        }
      }
    }
  }
}
</style>

